import React from 'react';
import { Menu, Button } from 'antd';
import { BarChartOutlined } from '@ant-design/icons';
import { TopNavBarProps } from '../types';
import { NAV_ITEMS } from '../constants';
import styles from './index.less';

const TopNavBar: React.FC<TopNavBarProps> = ({ 
  activeNav, 
  onNavChange, 
  userName, 
  userCode 
}) => {
  // 处理导航点击
  const handleNavClick = ({ key }: { key: string }) => {
    onNavChange(key);
  };

  return (
    <div className={styles.header}>
      <Menu
        mode="horizontal"
        selectedKeys={[activeNav]}
        onClick={handleNavClick}
        className={styles.nav}
      >
        {NAV_ITEMS.map(item => (
          <Menu.Item key={item.value} className={styles['nav-item']}>
            {item.label}
          </Menu.Item>
        ))}
      </Menu>
      
      <div className={styles['user-info']}>
        <span>{userName} {userCode}</span>
        <Button 
          type="default"
          icon={<BarChartOutlined />}
          size="small"
          className={styles['rank-btn']}
        >
          招聘排行
        </Button>
      </div>
    </div>
  );
};

export default TopNavBar; 